import React from 'react'
import { connect } from 'dva'
import { Form ,Modal,message,Upload,Button,Spin } from 'antd'
import { Link, hashHistory } from 'dva/router'
import config from 'config/config'
import $ from 'jquery'
import FlagBtn from 'widget/FlagBtn/FlagView'
import { mapStateToProps } from 'utils/view_utils'
import styles from './levelCommissionsRulesStyle.less'
import ListPage from 'widget/PageTmpl/ListPageQiance'
import classnames from 'classnames/bind';
import {verifyCommissionTokenFun} from './levelCommissionsRulesServ'
let cx=classnames.bind(styles);
const confirm = Modal.confirm;



const levelCommissionsRulesView = function({dispatch, model, form}) {
  // 表单的子函数
  const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  // modelObj.xxx获取model中状态机的值
  let {loading,submitFeikongLoading,backLoading,submitLoading,biz,products,id} = modelObj
 
  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `${config.mideaCommission}commission/wxyxTowcomruleH/list`,
      // 接口方式
      method: "GET",
      // "data_field_name":"data",
      app: "",
      // 接口参数
      params: {
        pageSize:'10',
        pageNo:'1'
        },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'projectname',
            zh_name: '所属项目',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'createTime',
            zh_name: '提交日期',
            elem_type: 'Date',
            format: 'YYYY-MM-DD',
            split_keys: ['dmakedate_begin','dmakedate_end'],
            elem_valid_type: 'string'
          },
        ],
        searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click')
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格  序号 是否生效 项目名称  佣金方案名称 方案生效日期 方案失效日期 审批人 审批通过日期   提交人 提交日期  创建人 创建日期
      table:
        {
          status_params: "status=0",
          status_text: "全部",
          // 表头字段列表
          scroll: { x: 1000},
          fields: [
            {
              en_name: "ruleNo",
              zh_name: "序号",
              width: 80,
              render: (a, item, index, d, e, f) => {
                return index+1
              },
            },
           
              {
                en_name: "projectname",
                zh_name: "项目名称",
              },
              {
                en_name: "startdate",
                zh_name: "生效日期",
              },
              
              {
                en_name: "enddate",
                zh_name: "失效日期",
              },
              {
                en_name: "iseffective",
                zh_name: "是否生效",
                render: (a, item, index, d, e, f) => {
                  let shelfStatus = item.iseffective=='Y'?'是': '否'
                  return (
                    <span>{shelfStatus}</span>
                  )
                }
              },
            
            {
              en_name: "edit",
              zh_name: "操作",
              width:160,
              fixed:'right',
              render: (a, item, index, d, e, f) => {
                return (
                  <span>
                      <FlagBtn node={<a onClick={() => checkOrEditSkip('check',item)}>查看<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                      <FlagBtn node={<a onClick={() => checkOrEditSkip('edit',item)}>编辑<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                      <FlagBtn node={<a onClick={() => deleteContent(item)}><span style={{color: item.c3Vbillstatus =="流程通过"||item.c3Vbillstatus =="流程审批中"?'#999':'#0877FD'}}>删除</span></a>}> </FlagBtn>
                  </span>
                )
              },
            }
          ],
        },
      // 操作栏
      action_bar: [
        {
          label: "录入",
          type: "primary",
          onClick: (e) =>{
            hashHistory.push({
              pathname: '/home/commissions/levelCommissionsRulesEdit',
              query: {}
            });
          }
        }
      ]
    },
  }
  function onRetrieve(){
    $('.listSearchBox').toggle()
  }
  //查看，编辑
  function checkOrEditSkip(type,item){
    if(type == 'check'||(type == 'edit' && item.c3Vbillstatus !="流程通过"&&item.c3Vbillstatus !="流程审批中")){
      hashHistory.push({
        pathname: '/home/commissions/levelCommissionsRulesEdit',
        query: {actionType: type, id:item.id }
      })
    }else{
      message.warn('只有未提交的申请单才能编辑')
    }
  }
  //删除
  function deleteContent(item){
    if(item.c3Vbillstatus !="流程通过"&&item.c3Vbillstatus !="流程审批中"){
      id = item.id
      confirm({
        title: '删除确认',
        content: '您真的要删除此条数据吗?',
        okText: '确认',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          baseFun(id,'deleteContent')
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }
  }

  function baseFun(id,type){
    verifyCommissionTokenFun().then(res=>{
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { id }
      })
      dispatch({
        type: `${namespace}/${type}`,
        payload: {}
      })
    });
  }
  if (!!modelObj.biz) {
		pageProps.biz = modelObj.biz
		pageProps.biz.syncBackCbf = (biz) => {
			dispatch({
				type: `${namespace}/updateStore`,
				payload: { biz }
			})
		}
  }

  return (
    <div className={cx('pageLayout')}>
      <ListPage pageProps={pageProps}/>
      {loading&&<div style={{position: "fixed",width: "100%",height: "100%",background: "rgba(204, 204, 204,.6)",zIndex: 9999999,top: "62px",textAlign: 'center',paddingTop:'200px',left:'168px'}}>
        <Spin tip="Loading..."></Spin>
      </div>}
    </div>
  )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(levelCommissionsRulesView))
